import React, { memo, useEffect, useState } from 'react'
import BScroll from '@better-scroll/core'
import axios from 'axios'
import Navbar from '../components/Navbar'
import { Popup, Button, Form, Input, Toast } from 'antd-mobile'
const Mine = memo(() => {
    let [a, setA] = useState([])
    let list = [
        {
            "id": "2",
            "pathname": "/home",
            "params": {},
            "handle": {
                "title": "首页"
            }
        },
        {
            "id": "2-0",
            "pathname": "/home/search",
            "params": {},
            "handle": {
                "title": "搜索"
            }
        },
        {
            "id": "2-0-0",
            "pathname": "/home/search/history",
            "params": {},
            "handle": {
                "title": "历史记录"
            }
        }
    ]
    let [visible, setVisible] = useState(false)
    let cur = list.filter(item => item.handle.title).map(item => item.handle.title).join(">")
    useEffect(() => {
        new BScroll('.wrapper', {
            scrollX: true,
        })
    })
    useEffect(() => {
        axios.get("http://localhost:3000/a").then(res => setA(res.data))
    }, [])
    return (
        <div>
            <Navbar title='我的'></Navbar>
            <div className='wrapper'>
                <div className='content'>
                    {a.map(item => <div key={item}></div>)}
                </div>
            </div>
            <div>{cur}</div>
            <br />
            <Button
                color='primary'
                fill='solid'
                onClick={() => {
                    setVisible(true)
                }}
            >
                点击登录
            </Button>
            <Popup
                visible={visible}
                onMaskClick={() => {
                    setVisible(false)
                }}
                bodyStyle={{ height: '40vh' }}
            >
                <Form layout='horizontal' mode='card'>
                    <Form.Item label='手机号'>
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item label='短信验证码'>
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Header />
                    <Button
                        block
                        color='primary'
                        fill='solid'
                        onClick={() => {
                            setVisible(false)
                            Toast.show({
                                icon: 'success',
                                content: '保存成功',
                            })
                        }}>登录</Button>
                </Form>
            </Popup>
        </div >
    )
})

export default Mine